// 1. 装包 yarn add vue-router@3.5.3
// 2. 在 main.js 中引入 VueRouter 构造函数
import VueRouter from 'vue-router'
// 引入 Vue
import Vue from 'vue'

// 引入组件
import Layout from '../views/Layout.vue'
import ArticleDetail from '../views/ArticleDetail.vue'
import Article from '../views/Article.vue'
import Collect from '../views/Collect.vue'
import Like from '../views/Like.vue'
import User from '../views/User.vue'

// 3. 安装插件 - 帮我们注册全局组件 router-view router-link
// Vue.use(插件) 方法
Vue.use(VueRouter)

// 4. 创建路由对象
// 核心步骤:
// a. 配置路由规则
const routes = [
  // 配置一级路由
  // 记得在 App.vue 中配置路由的出口
  {
    path: '/',
    component: Layout,
    redirect: '/article',
    // 配置子路由 (二级路由)
    children: [
      // 一个对象表示一个子路由规则
      // 注意事项: 一般子路由写 path 不需要以 / 开头, 会自动拼接父级路由的 path
      { path: 'article', component: Article },
      { path: 'collect', component: Collect },
      { path: 'like', component: Like },
      { path: 'user', component: User }
    ]
  },
  {
    path: '/detail/:id', // params 获取
    component: ArticleDetail
  }
]

// b. 指定路由出口 (组件渲染到哪里)
const router = new VueRouter({
  routes,
  // 路由模式: hash(有#) history(没有#, 但需要后端支持)
  // 本地开发用到的服务器是 DevServer
  // 是脚手架提供的一个开发服务器, 这个服务器已经帮我们配好了, 所以可以直接使用
  // 将来项目上线, 不会再使用这个服务器了, 就需要与后端工程师或运维工程师沟通来配合
  mode: 'hash' 
  // 总结: 将来项目上线用什么模式是由产品经理或项目经理决定的, 所以在开发阶段为了不必要的麻烦, 统一使用 hash 模式
  // 如果项目上线真的要改为 history 模式, 则需要后端配合: https://v3.router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
  // 让后台始终返回一个 index.html
})

export default router